Ext.onReady(function(){
	////// project grid
	var store = new Ext.data.Store({
    	url: 'project.do?action=query',
    	reader: new Ext.data.JsonReader({
    		root: 'content',
    		totalProperty: 'total',
    		id: 'id',
    		fields: [
	           {name: 'id'},
	           {name: 'name'},
	           {name: 'desc', mapping: 'description'}
	        ]
    	})
        
    });
    
	var grid = new Ext.grid.GridPanel({
		id: 'projectGrid',
//    	renderTo: 'project-grid-div',
		region:'center',
		margins:'0 5 5 5',
        store: store,
        columns: [
            {header: "id", width: 200, dataIndex: 'id'},
            {header: "name", width: 100, dataIndex: 'name'},
            {header: "desc", width: 250, width: 150, dataIndex: 'desc'}
        ],
        stripeRows: true,
        title: 'Projects',
	        sm: new Ext.grid.RowSelectionModel(),
        bbar: new Ext.PagingToolbar({
            pageSize: 1,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            paramNames: {start: 'start', limit: 'limit', total: 'total'}
        }),
        listeners: {
        	'rowclick': function(grid, rowIndex, e) {
        		//alert('you click ' + rowIndex);
        	}
        }
    });
    
    var headerPanel = new Ext.Panel({
    	border: false,
        layout:'anchor',
        region:'north',
        height:60,
        items: [
	        new Ext.Toolbar({
	            items:[ ' ', 
				new Ext.Button({
					id: 'newBtn',
					text: 'New'
				}), new Ext.Button({
					id: 'editBtn',
					text: 'Edit'
				}), new Ext.Button({
					id: 'delBtn',
					text: 'Delete'
				})
				]
        })]
    });
    
    var viewport = new Ext.Viewport({
		layout:'border',
        items:[headerPanel, grid]
	});
    
    store.load({params:{start:0, limit:10}});
    
    var projectFormPanel = new Ext.FormPanel({
//    	title: 'Project Form',
		url:'project.do?action=save',
		baseParams: {type: '', id: ''},
		bodyStyle:'padding:5px 5px 0',
//		border: false,
//		anchor: '10',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',
        labelWidth: 75, // label settings here cascade unless overridden
    	items: [{
                fieldLabel: 'Name',
                name: 'name'
            }, new Ext.form.DateField({
                fieldLabel: 'Start Date',
                name: 'startDate'
            }), new Ext.form.DateField({
                fieldLabel: 'End Date',
                name: 'endDate'
            }), {
                fieldLabel: 'Owner',
                name: 'owner'
            }, {
            	xtype: 'textarea',
	            fieldLabel: 'Description',
	            name: 'desc',
	            height: 200
            }
        ],

        buttons: [{
            text: 'Save',
            listeners: {
            	'click': function(button, e) {
            		projectFormPanel.getForm().submit({
            			success: function() {
            				win.hide();
            				store.load();
            			},
            			failure: function() {
            				Ext.Msg.alert("Error", "save failure..");
            			}
            		});
            	}
            }
        },{
            text: 'Cancel',
            listeners: {
            	'click': function(button, e) {
            		win.hide();
            	}
            }
        }]
    });
    
    var userRolesPanel = new Ext.Panel({
    	
    });
    var win = new Ext.Window({
		title: 'Project Form',
		closeAction: 'hide',
		layout: 'anchor',
//        width: 380,
//		bodyStyle:'padding:5px 5px 0',
    	items: projectFormPanel
    });
    
    var form = projectFormPanel;
    Ext.get('newBtn').on('click', function(){
    	form.baseParams.type = 'new';
		win.show(this);
    	form.find('name', 'name')[0].setRawValue();
    	form.find('name', 'desc')[0].setRawValue();
    });
    Ext.get('editBtn').on('click', function(){
    	var record = Ext.getCmp('projectGrid').getSelectionModel().getSelected();
		if (!record) {
			alert('no record selcted!');
			return ;
		}
    	form.baseParams.type = 'edit';
    	form.baseParams.id = record.data.id;
		win.show(this);
    	form.find('name', 'name')[0].setValue(record.data.name);
    	form.find('name', 'desc')[0].setValue(record.data.desc);
    });
    Ext.get('delBtn').on('click', function(){
		var record = Ext.getCmp('projectGrid').getSelectionModel().getSelected();
		if (!record) {
			alert('no record selcted!');
			return ;
		}
//		alert('delete project.id: ' + record.data.id);
    });
    
});